/**
 * 请假信息组件-教师、家长端
 * Created by xxx on 2017/7/13.
 */
'use strict';
import React, {
    Component
} from 'react'
import {
    Link
} from 'react-router'
import {
    hashHistory
} from 'react-router'

import {
    HttpService,
    Tips,
    getDefaultImg
} from '../Tools'

import Header from './Common/Header'
import Footer from './Common/Footer'
import ConfirmBox from './Common/ConfirmBox'

import dial from '../Img/icon/dial.png'
//import rightGray from '../Img/icon/right_gray.png'

export default class ScoreDetail extends Component {
    constructor(props) {
        super(props);
        this.ok = true
        this.status = '审批中'
        this.config = {
            title: '温馨提示',
            content: '确定撤销本次请假申请吗'
        }
        this.state = {
            show: 0
        }
    }

    componentWillMount() {
        HttpService.query({
            url: '/jxt-bbzx/SickFormDetailServlet',
            async: false,
            data: {
                token: sessionStorage.orgid,
                userid: sessionStorage.userid,
                sickFormId: this.props.params.id
            },
            success: (res => {
                if (res.code == 0) {
                    if (res.data.checkType2 == 1) {
                        this.status = '同意'
                    } else if (res.data.checkType2 == 2) {
                        this.status = '不同意'
                    }
                } else {
                    this.ok = false
                }
            }),
            fail: (res => {
                this.ok = false
                Tips('未查询到请假信息')
            })
        });
    }

    componentDidMount() {
        if (this.ok) {
            if (document.getElementById('chexiao'))
                document.getElementById('chexiao').style.display = 'block'
            if (document.getElementById('shenhe'))
                document.getElementById('shenhe').style.display = 'block'
        }else{
            document.querySelector('.leave_detail .content').innerHTML='请假信息不存在或已删除'
        }
    }


    //关闭confirmBox
    cfmCancel() {
        this.setState({
            show: 0
        })
    }
    cfmSure() {
        this.setState({
            show: 0
        })
        HttpService.query({
            url: '/jxt-bbzx/SickFormRevokeServlet',
            data: {
                id: this.props.params.id
            },
            success: (res => {
                if (res == 1) {
                    hashHistory.push('/LeaveList')
                } else {
                    Tips('撤销请假失败');
                }
            }),
            fail: (res => {
                Tips('该请假信息已审核')
            })
        });
    }

    //撤销请假
    leaveClose() {
        this.setState({
            show: 1
        })
    }
    //请假审核
    leaveReply(e) {
        e.preventDefault();
        const check = this.refs.check.value,
            content = this.refs.content.value;

        if (content != '' && content.length > 50) {
            Tips('回执信息已超过50字')
            return;
        }
        HttpService.query({
            url: '/jxt-bbzx/SickFormCheckServlet',
            data: {
                id: this.props.params.id,
                teacherid: sessionStorage.userid,
                check,
                content
            },
            success: (res => {
                if (res == 1 || res == '') {
                    Tips('请假审批成功');
                    if (sessionStorage.weixinmsg == 'true') {
                        document.querySelector('.footer').style.display = 'none'
                        window.close()
                    } else {
                        hashHistory.goBack(-1)
                    }
                } else {
                    Tips('请假审批失败');
                }
            })
        });
    }
    render() {
        const {
            name,
            type,
            timefrom,
            timeto,
            content,
            content_t
        } = this.props.params
        const status = this.status
        let statusClass = ''
        if (status == '同意')
            statusClass = 1
        if (status == '不同意')
            statusClass = 2
        return (
            <div className='hasfoot2'>
                <div className='leave_detail'>
                    <Header title='请假详情'/>
                    <div className="content clearfix">
                        <div className="img">
                            <img src={getDefaultImg()}/>
                        </div>
                        <div className="info">
                            <div className="title">{name}</div>
                            <div className="info_list">
                                <span className="list_left">请假类型：</span>
                                <span className="list_right">{type}</span>
                            </div>
                            <div className="info_list">
                                <span className="list_left">请假时间：</span>
                                <span className="list_right">{timefrom}-<br/>{timeto}</span>
                            </div>
                            <div className="info_list">
                                <span className="list_left">请假原因：</span>
                                <span className="list_right breakall">{content}</span>
                            </div>
                            {/*<div className="info_list">
                                <span className="list_left">审批人：</span>
                                <span className="list_right">王老师</span>
                            </div>*/}
                            <span className={"type type" + statusClass}>{status}</span>
                        </div>
                    </div>
                    {/*sessionStorage.userrole != '家长'
                        ? <a href={'tel:15983966628'} className="phone clearfix block">
                                <div><img src={dial}/>联系孩子家长</div>
                                <img src={rightGray} className="phone_right"/>
                            </a>
                        : ''*/}

                    {status == '审批中'
                        ? <div>
                                {sessionStorage.userrole == '家长'
                                    ? <div className="apply_button hidden" id='chexiao' onClick={this.leaveClose.bind(this)}>撤销请假</div>
                                    : ''}
                            </div>
                        : <div className="apply_people breakall">{content_t && content_t != '无' && content_t.replace(/\s/ig,'') != ''
                                ? `班主任回复：${content_t}`
                                : ''}</div>
                        }
                    {sessionStorage.userrole == '班主任' && status == '审批中' && content != '无'
                        ? <form className="to_examine hidden" onSubmit={this.leaveReply.bind(this)} id='shenhe'>
                                <label className="lt_hw_list ">
                                    <span className="title">是否同意</span>
                                    <div className="hw_right">
                                        <select ref='check' dir="rtl">
                                            <option value="1">同意</option>
                                            <option value="2" style={{
                                                color: 'red'
                                            }}>不同意</option>
                                        </select>
                                    </div>
                                    <span className="input_right_img"/>
                                </label>
                                <div className="leave_cause">
                                    <span className="title">补充信息</span>
                                    <textarea ref='content' cols="30" placeholder="请填写补充信息（50字以内）"/>
                                </div>
                                {/*<input className="apply_button block" type='submit' value='提交'/>*/}
                                <Footer>
                                    <a className="pjb_ntcread" onClick={this.leaveReply.bind(this)}>提交</a >
                                </Footer>
                            </form>
                        : ''
}
                </div>
                <ConfirmBox config={this.config} show={this.state.show} cancel={this.cfmCancel.bind(this)} sure={this.cfmSure.bind(this)}/>
            </div>
        )
    }
}
